import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
import { TreeNode } from '@iux/live';

@Component({
  selector: 'app-custom-panel-render',
  templateUrl: './custom-panel-render.component.html',
  styles: [
    `
      .ui-tree-select-container {
        width: 368px;
      }
      .ui-tree-node-item {
        display: flex;
        justify-content: space-between;
      }
      .ui-tree-node-item lv-group {
        margin-left: 8px;
      }
      .custom-container {
        background: #f2f2f2;
        color: #4d4d4d;
        padding: 1px 8px;
        font-size: 12px;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CustomPanelRenderComponent {
  treeData: TreeNode[] = [
    {
      label: 'root node 1',
      children: [
        {
          label: 'child node 1-1 long long long long long long long long long long long long',
          children: [
            { label: 'left node 1-1-1', isLeaf: true },
            { label: 'left node 1-1-2', isLeaf: true },
          ],
        },
        {
          label: 'child node 1-2',
          children: [
            { label: 'left node 1-2-1 long long long long long long long long long long long long', isLeaf: true },
            { label: 'left node 1-2-2', isLeaf: true },
          ],
        },
      ],
    },
    {
      label: 'root node 2',
      children: [
        {
          label: 'left node 2-1',
          isLeaf: true,
        },
        {
          label: 'child node 2-2',
          children: [
            { label: 'left node 2-2-1', isLeaf: true },
            { label: 'left node 2-2-2', isLeaf: true },
          ],
        },
      ],
    },
    {
      label: 'root node 3',
      children: [
        {
          label: 'left node 3-1',
          isLeaf: true,
        },
        {
          label: 'left node 3-2',
          isLeaf: true,
        },
      ],
    },
  ];
  selection: TreeNode[] = [];

  constructor(private cdr: ChangeDetectorRef) {}

  // 选中项变化回调
  onChange(event) {
    console.log('selection:', event);
  }

  // 自定义tree节点点击事件
  beforeSelected = item => {
    if (!item.isLeaf) {
      item.expanded = !item.expanded;
      this.cdr.markForCheck();

      return false;
    }
  };

  copy(e) {
    e.stopPropagation();
    console.log('copy');
  }

  delete(e) {
    e.stopPropagation();
    console.log('delete');
  }
}
